<template>
  <div class="app-container">
    <!-- <div ref="gantt" class="left-container" /> -->
    <div id="gantt_here" style="width: 100vx; height: 80vh"></div>
    <el-dialog title="" :visible.sync="dialogVisable">
      <el-form label-width="80px" size="small">
        <el-form-item label="任务名称">
          <el-input placeholder="" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker placeholder="" v-model="value1"></el-date-picker>
        </el-form-item>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="周期">
              <el-input-number
                placeholder=""
                v-model="num"
              ></el-input-number> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="负责人" v-model="form.region">
              <el-select v-model="form.region" placeholder="请选择负责人">
                <el-option label="吴春乐" value="吴春乐"></el-option>
                <el-option label="张三" value="张三"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="3"
            placeholder=""
            v-model="form.textarea"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAfterTaskAdd">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getDaysBetween } from "./getDaysBetween";
// import axios from "axios";
let taskData = require("../data");

// let taskData = window.taskData;
const gantt = window.gantt;

export default {
  // props: {
  //   taskData: {
  //     type: Object,
  //     required: true,
  //     default() {
  //       return { data: [] };
  //     },
  //   },
  // },
  data() {
    return {
      dialogVisable: false,
      value1: "",
      num: 1,
      form: {
        name: "",
        textarea: "",
        region: "",
      },
      taskData: [],
    };
  },

  mounted() {
    gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
    gantt.config.bar_height = 16;
    gantt.config.row_height = 40;
    gantt.locale.labels.baseline_enable_button = "Set";
    gantt.locale.labels.baseline_disable_button = "Remove";
    gantt.attachEvent("onTaskDblClick", this.onTaskDblClick);
    gantt.attachEvent("onTaskCreated", this.onTaskDblClick);
    gantt.attachEvent("onAfterTaskAdd", this.onAfterTaskAdd);
    gantt.config.lightbox.sections = [
      {
        name: "description",
        height: 70,
        map_to: "text",
        type: "textarea",
        focus: true,
      },
      { name: "time", map_to: "auto", type: "duration" },
      {
        name: "baseline",
        map_to: { start_date: "planned_start", end_date: "planned_end" },
        button: true,
        type: "duration_optional",
      },
    ];
    gantt.locale.labels.section_baseline = "Planned";
    (gantt.config.columns = [
      { name: "text", label: "任务名称", tree: true, width: "160" },
      { name: "start_date", label: "开始时间", align: "center", width: "100" },
      {
        name: "duration",
        label: "实际时间",
        align: "center",
        width: "55",
        template: function (obj) {
          return Math.floor(obj.duration).toString() + "天";
        },
      },
      // { name: 'end_date', label: '结束时间', align: 'center' },
      {
        name: "progress",
        label: "预期时间",
        align: "center",
        width: "55",
        template: function (obj) {
          return getDaysBetween(obj.planned_start, obj.planned_end) + "天";
          // return Math.floor(obj.progress * 100).toString() + "%";
        },
      },
      { name: "add", label: "" },
    ]),
      // adding baseline display
      gantt.addTaskLayer({
        renderer: {
          render: function draw_planned(task) {
            if (task.planned_start && task.planned_end) {
              var sizes = gantt.getTaskPosition(
                task,
                task.planned_start,
                task.planned_end
              );
              var el = document.createElement("div");
              el.className = "baseline";
              el.style.left = sizes.left + "px";
              el.style.width = sizes.width + "px";
              el.style.top = sizes.top + gantt.config.bar_height + 13 + "px";
              return el;
            }
            return false;
          },
          // define getRectangle in order to hook layer with the smart rendering
          getRectangle: function (task) {
            if (task.planned_start && task.planned_end) {
              return gantt.getTaskPosition(
                task,
                task.planned_start,
                task.planned_end
              );
            }
            return null;
          },
        },
      });

    gantt.templates.task_class = function (start, end, task) {
      if (task.planned_end) {
        var classes = ["has-baseline"];
        if (end.getTime() > task.planned_end.getTime()) {
          classes.push("overdue");
        }
        return classes.join(" ");
      }
    };

    gantt.templates.rightside_text = function (start, end, task) {
      if (task.planned_end) {
        if (end.getTime() > task.planned_end.getTime()) {
          var overdue = Math.ceil(
            Math.abs(
              (end.getTime() - task.planned_end.getTime()) /
                (24 * 60 * 60 * 1000)
            )
          );
          var text = "<b>逾期: " + overdue + " 天</b>";
          return text;
        }
      }
    };

    gantt.attachEvent("onTaskLoading", function (task) {
      task.planned_start = gantt.date.parseDate(task.planned_start, "xml_date");
      task.planned_end = gantt.date.parseDate(task.planned_end, "xml_date");
      return true;
    });

    //添加后触发
    // let this_ = this;
    // gantt.attachEvent("onAfterTaskAdd", function () {
    //   console.log("添加后触发");
    //   this_.changeTask();
    // });

    //只读模式
    // gantt.config.readonly = true;
    gantt.config.open_tree_initially = true;
    gantt.config.date_format = "%Y-%m-%d %H:%i";
    gantt.config.date_scale = "%M%d日";
    gantt.i18n.setLocale("cn");
    // 在时间线上增加一行年份显示
    gantt.config.subscales = [
      {
        unit: "year",
        step: 1,
        date: "%Y",
      },
    ];

    setTimeout(() => {
      gantt.init("gantt_here");
      // gantt.init(this.$refs.gantt);

      gantt.parse(taskData);
    }, 1500);
    // this.GetList();
  },
  methods: {
    onTaskDblClick(id, e) {
      console.log(id, e);
      this.dialogVisable = !this.dialogVisable;
      // return true;
    },
    // GetList() {
    //   axios.get("http://localhost:5000/data4").then((res) => {
    //     console.log(res);
    //     this.taskData = res.data.data;
    //     console.log(this.taskData);
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.left-container {
  height: 600px;
}
</style>
<style lang="scss">
// @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
.avatar {
  display: inline-block;
  background: #f56c6c;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  // padding: 8px;
}
</style>
